<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Forms</title>
    <link rel="stylesheet" type="text/css" href="/taskManager05/ext/resources/css/ext-all.css"/>

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="/taskManager05/ext/adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="/taskManager05/ext/ext-all-debug.js"></script>

    <script type="text/javascript" src="/taskManager05/js/states.js"></script>
    <script type="text/javascript" src="/taskManager05/js/dynamic.js"></script>
    <link rel="stylesheet" type="text/css" href="/taskManager05/css/forms.css"/>

    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="/taskManager05/css/examples.css"/>
</head>
<body>
<script type="text/javascript" src="/taskManager05/js/examples.js"></script>
<!-- EXAMPLES -->
<!-- EXAMPLES -->
<h1>由 JavaScript 创建的表单</h1>
<p>这些表单没有执行任何操作，并且具有极其简单的效验。它们仅仅用来演示如何快速地创建表单并对其进行布局。</p>
<p>PS：JS文件没有经过压缩，所以可以直接打开查看。完整源码请见：<a href="dynamic.js">dynamic.js</a>。</p>
<div style="width:300px;">
	<div class="x-box-tl">
		<div class="x-box-tr">
			<div class="x-box-tc"></div>
		</div>
	</div>
	<div class="x-box-ml">
		<div class="x-box-mr">
			<div class="x-box-mc">
				<h3 style="margin-bottom:5px;">Simple Form</h3>
				<div id="form-ct">
				</div>
			</div>
		</div>
	</div>
	<div class="x-box-bl">
		<div class="x-box-br">
			<div class="x-box-bc"></div>
		</div>
	</div>
</div>
<br/>
<div style="width:500px;">
	<div class="x-box-tl">
		<div class="x-box-tr">
			<div class="x-box-tc"></div>
		</div>
	</div>
	<div class="x-box-ml">
		<div class="x-box-mr">
			<div class="x-box-mc">
				<h3 style="margin-bottom:5px;">Multi-column and labels top</h3>
				<div id="form-ct2">
				</div>
			</div>
		</div>
	</div>
	<div class="x-box-bl">
		<div class="x-box-br">
			<div class="x-box-bc"></div>
		</div>
	</div>
</div>
<br/>
<div style="width:340px;">
	<div class="x-box-tl">
		<div class="x-box-tr">
			<div class="x-box-tc"></div>
		</div>
	</div>
	<div class="x-box-ml">
		<div class="x-box-mr">
			<div class="x-box-mc">
				<h3>Fieldsets, labels right and complex fields</h3>
				<div id="form-ct3">
				</div>
			</div>
		</div>
	</div>
	<div class="x-box-bl">
		<div class="x-box-br">
			<div class="x-box-bc"></div>
		</div>
	</div>
</div>
<br/>
<div style="width:600px;">
	<div class="x-box-tl">
		<div class="x-box-tr">
			<div class="x-box-tc"></div>
		</div>
	</div>
	<div class="x-box-ml">
		<div class="x-box-mr">
			<div class="x-box-mc">
				<h3 style="margin-bottom:5px;">Multi-column, nesting and fieldsets</h3>
				<div id="form-ct4">
				</div>
			</div>
		</div>
	</div>
	<div class="x-box-bl">
		<div class="x-box-br">
			<div class="x-box-bc"></div>
		</div>
	</div>
</div>
<div class="x-form-clear"></div>
</body>
</html>
